<template>
  <div class="group-tab">
    <article
      v-if="!groupList.length"
      class="add"
      @click="handleAddDepartment(groupList)"
    >+添加</article>
    <nav
      v-for="(company, cIdx) in groupList"
      :key="cIdx"
      class="common-item"

    >
      <section class="item-wrapper"
               @click.stop="handleChecked({
               position: company.list,
               current: company,
               parent: groupList,
               index: cIdx
               })"
      >
        <p>{{company.name}}</p>
        <button
          v-if="company.isChecked"
          @mouseenter="handleMouseEnter"
          @mousemove="handleMouseMove"
          @mouseleave="handleMouseLeave"
        >+部门</button>
      </section>
      <nav
        v-for="(department, dIdx) in company.list"
        :key="dIdx"
        style="padding-left: 10px"
        class="common-item"
      >
        <section class="item-wrapper"
                 @click.stop="handleChecked({
                 position: department.list,
                 current: department,
                 parent: company.list,
                 index: dIdx
                 })"
        >
          <p>{{department.name}}</p>
          <button
            v-if="department.isChecked"
            @mouseenter="handleMouseEnter"
            @mousemove="handleMouseMove"
            @mouseleave="handleMouseLeave"
          >+团队</button>
          <!--<button @click="handleAddDepartment(department.list)">+团队</button>-->
        </section>
        <nav
          v-for="(team, tIdx) in department.list"
          :key="tIdx"
          style="padding-left: 20px"
          class="common-item"
        >
          <section class="item-wrapper"
                   @click.stop="handleChecked({
                   position: team.list,
                   current: team,
                   parent: department.list,
                   index: tIdx,
                   isLastDepartment: true
                   })"
          >
            <p>{{team.name}}</p>
            <button
              v-if="team.isChecked"
              @mouseenter="handleMouseEnter"
              @mousemove="handleMouseMove"
              @mouseleave="handleMouseLeave"
            >+++</button>
          </section>
        </nav>
      </nav>
    </nav>
  </div>
</template>

<script type="text/ecmascript-6">
  import {outreachGroupMethods, outreachGroupComputed} from '@state/helpers'

  const COMPONENT_NAME = 'GROUP_TAB'

  export default {
    name: COMPONENT_NAME,
    data() {
      return {
        timer: null
      }
    },
    computed: {
      ...outreachGroupComputed
    },
    methods: {
      ...outreachGroupMethods,
      handleAddDepartment(position) {
        this.setAddPosition({position})
        this.handleModal({isShow: true, title: '添加子部门', useType: 'addDepartment'})
      },
      handleChecked(args) {
        const {current, position, parent, index, isLastDepartment} = args
        this.setAddPosition({position, isLastDepartment})
        this.setDelPosition({parent, index})
        this.setEditPosition({current})
        this.setMovePosition({parent, index, current})
        this.changeTab({current})
      },
      handleMouseEnter(e) {
        let position = {
          x: e.pageX + 10,
          y: e.pageY - 30
        }
        this.setPosition(position)
        this.handleTools(true)
      },
      handleMouseMove(e) {
        let position = {
          y: e.pageY - 30
        }
        this.setPosition(position)
      },
      handleMouseLeave(e) {
        this.timer && clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.handleTools(false)
        }, 300)
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~@design"

  .group-tab
    width: 140px
    height :100%
    border-right:0.5px solid $color-line
    overflow-y:scroll
    .common-item
      border-bottom :0.5px solid $color-line
      .item-wrapper
        height :50px
        layout(row,block,nowrap)
        align-items :center
        justify-content :space-between
    .add
      margin :5px auto
      width :50px
      height :@width
      text-align :center
      line-height :@height
      border:1px solid $color-line
</style>
